<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Import style -->
  <link rel="stylesheet" href="./static/element-plus/index.css" />
  <!-- Import Vue 3 -->
  <script src="./static/js/vue.global.js"></script>
  <!-- Import component library -->
  <script src="./static/element-plus/index.full.js"></script>
  <title>技术社区</title>
  <style>
    .el-carousel__item img {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="app">
    <el-container>
      <el-header>
        <el-row>
          <el-col span="4" style="display: flex; flex-direction: row; align-items: center;">
            <img src="./static/image/logo.png" style="height: 60px; width: 60px;" />
            <h2>技术社区</h2>
          </el-col>

          <el-col :span="8">
            <el-menu default-active="activeIndex" mode="horizontal" style="border-bottom: none !important">
              <el-menu-item index="1">首页</el-menu-item>
              <el-menu-item index="2">文章</el-menu-item>
              <el-menu-item index="3">课程</el-menu-item>
              <el-menu-item index="4">商城</el-menu-item>
            </el-menu>
          </el-col>

          <el-col :span="8" style="height: 60px;line-height: 60px;" class="hidden">
            <el-input placeholder="请输入内容">
            </el-input>
          </el-col>

          <el-col :span="4">
            <div v-if="!isLoggedIn">
              <a href="./login.html" style="text-decoration: none; color: #409EFF;">登录</a>
              <a href="./Register.html" style="text-decoration: none; color: #409EFF;">注册</a>
            </div>
            <div v-else>
              <img :src="user.avatar" style="height: 40px; width: 40px; border-radius: 50%;" />
              <span style="margin-left: 10px;">{{ user.name }}</span>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-carousel height="420px">
          <el-carousel-item>
            <img src="./static/image/carousel1.png">
          </el-carousel-item>
          <el-carousel-item>
            <img src="./static/image/carousel2.png">
          </el-carousel-item>
          <el-carousel-item>
            <img src="./static/image/carousel3.png">
          </el-carousel-item>
        </el-carousel>
      </el-main>

      <el-footer>
        <el-row>
          <el-col :xs="24" :lg="8">
            <div>
              <img src="./static/image/logo.png" style="height: 60px; width: 60px;" />
              <h2>技术社区</h2>
              <p>致力于构建一个专业的IT技术交流社区</p>
            </div>
          </el-col>

          <el-col :xs="24" :lg="8">
            <div>
              <el-link>首页</el-link>
              <el-link>文章</el-link>
              <el-link>课程</el-link>
              <el-link>商城</el-link>
            </div>
            <div>
              <el-link>关于我们</el-link>
              <el-link>使用手册</el-link>
              <el-link>隐私条款</el-link>
              <el-link>建议反馈</el-link>
            </div>
          </el-col>

          <el-col :xs="24" :lg="8">
            <div>
              <h2>联系我们</h2>
              <p>电话：1433223</p>
              <p>邮箱：QQ.COM</p>
            </div>
          </el-col>

          <el-col :xs="24" :lg="8">
            <p>asdadd</p>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>

  <script>
    var App = {
      data() {
        return {
          isLoggedIn: false, 
          user: {
            name: 'wyf',
            avatar: './static/image/wyf.png'
          }
        }
      },
      methods: {
        login() {
          this.isLoggedIn = true;
        }
      }
    }
    Vue.createApp(App).use(ElementPlus).mount("#app");
  </script>
</body>

</html>